<template>
  <div class="dashboard-container">
    <el-row class="top_info">
      <el-col :span="24">
        <span class="title">最新公告</span>
      </el-col>
    </el-row>
    <!--公告内容-->
    <el-row class="content">

      <el-row class="content_title">
        <el-col :span="4">时间</el-col>
        <el-col :span="20">公告详情</el-col>
      </el-row>
      <el-row class="content_info" v-for="(item,index) in notices" :key="index">
        <el-col :span="4">{{item.cTime}}</el-col>
        <el-col :span="20">{{item.content}}</el-col>
      </el-row>
    </el-row>

  <el-row class="noticeFooter">
    <ul class="noticeFooter-left">共{{noticeInfo.totalCount}}条公告 共{{pageNums.length}}页</ul>
    <ul class="noticeFooter-right">
      <button @click="GetNoticesList(1)">首页</button>
      <button @click="GetNoticesList(--currtPage)">前一页</button>
      <span>【</span>
      <button v-for="item in pageNums" :key="item" :class="item === currtPage?'noticeFooterSelected':''" @click="GetNoticesList(item)">
        {{item}}
      </button>
      <span>】</span>
      <button @click="GetNoticesList(++currtPage)">后一页</button>
      <button @click="GetNoticesList(lastPage)">末页</button>
    </ul>
  </el-row>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'notice',
  methods: {
    GetNoticesList(value) {
      if (value < 0) {
        value = 1
      }
      if (value > this.lastPage) {
        value = this.lastPage
      }
      this.$store.dispatch('GetNoticesList', value)
        .then(response => {
          if (response.data === undefined) {
            this.$message({
              type: 'success',
              message: response.message,
            })
          } else {
            this.currtPage = value
            this.notices = response.data
            this.noticeInfo = response.pageinfo
          }
        })
    },
  },
  data() {
    return {
      notices: '', // 公告
      noticeInfo: '', // 公告信息
      lastPage: 1, // 最后一页
      currtPage: 1, // 当前页
    }
  },
  computed: {
    ...mapGetters(['info']),
    pageNums() {
      const num = Math.ceil(parseInt(this.noticeInfo.totalCount) / parseInt(this.noticeInfo.pageSize))
      this.lastPage = num
      const ArrayNum = []
      for (let i = 1; i <= num; i++) {
        ArrayNum.push(i)
      }
      return ArrayNum
    },
  },
  created() {
    this.GetNoticesList(this.currtPage)
  },
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.dashboard {
  &-container {
    margin: 10px 5px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
.el-row{
  line-height: 30px;
  font-size:13px;
}
.top_info{
  font-size: 13px;
  line-height: 30px;
  background: #ECEFF2;
  border-bottom: 1px solid #d0dff2;
  padding: 0 0 0 10px;
}

  .title{
    font-size:13px;
    /*background: url(../images/red/tb.png) no-repeat left center;*/
    padding-left: 20px;
    margin: 0 5px;
    font-weight: bold;
    float: left;
    color: #386399;
  }
  .content_title{
    box-shadow: inset 0px -14px 19px 2px #CAE8F6
  }

  .content{
    text-align: center;
    padding: 5px;
  }
  .content .el-row{
    /*border:1px solid #CCCCCC;*/
  }
  .content .el-row .el-col{
    border:1px solid #cccccc;
  }

  .noticeFooter{
    background-color: #EEEEEE;
    margin: 0 5px;
  }
  .noticeFooter-left{
    float: left;
  }
  .noticeFooter-right{
    float: right;
  }
  .noticeFooter-right button{
    border:0;
    background-color: rgba(0,0,0,0);
    color: blue;
    cursor: pointer;
  }

  .noticeFooter-right button:hover {
    color: red;
    text-decoration: underline;
  }
  .noticeFooterSelected{
    color:#ccc !important;
  }
</style>
